<template>
  <base-breadcrumb class="UpdateArchivePlan-container" :title="breadcrumbTitle">
    <a-card :bordered="false">
      <title-name title="竣工项目归档计划" />
      <s-table
        ref="table"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        show-size-changer
        show-quick-jumper
        :showPagination="false"
        :scroll="{ y: 500 }"
      >
        <template slot="ifOnTimeArchive" slot-scope="text, record">
          <span v-if="text === true">能</span>
          <span v-else-if="text === false" style="color: red;">否</span>
          <span v-else>——</span>
        </template>
        <template slot="ifCheckArchive" slot-scope="text, record">
          <a-checkbox :disabled="checkDisabled(record)" v-model="record.ifCheckArchive"></a-checkbox>
        </template>
      </s-table>
    </a-card>
    <div class="tool-btns page-btn-right-top">
      <a-button v-if="!isDisabled" type="primary" :loading="loadingState.isSubmit" @click="handleSubmit('isSubmit')"
        >提交</a-button
      >
      <a-button class="ml12" type="default" @click="handleClose">关闭</a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { getPlanCheckDetail, checkArchive } from '@/api/office/archiveManage/archivePlan.js'
import { packageConfirm } from '@/utils/baseAction.js'

const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'index',
    customRender() {
      return arguments[2] + 1
    },
  },
  {
    title: '分公司',
    dataIndex: 'branchOrgName',
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
  },
  {
    title: '开工日期',
    dataIndex: 'startWorkingTime',
  },
  {
    title: '计划竣工日期',
    dataIndex: 'completionTime',
  },
  {
    title: '计划归档日期',
    dataIndex: 'archiveTime',
  },
  {
    title: '合同金额（万元）',
    dataIndex: 'contractAmount',
  },
  {
    title: '项目经理',
    dataIndex: 'pmName',
  },
  {
    title: '是否能按时归档',
    dataIndex: 'ifOnTimeArchive',
    scopedSlots: { customRender: 'ifOnTimeArchive' },
  },
  {
    title: '核定是否归档',
    dataIndex: 'ifCheckArchive',
    scopedSlots: { customRender: 'ifCheckArchive' },
  },
]
export default {
  name:'a'+Date.now(),
  components: {
    STable,
  },
  data() {
    return {
      columns,
      loadingState: {
        isSubmit: false,
      },
      originList: [],
    }
  },
  computed: {
    pageType() {
      if (this.isAudit) {
        return 'look'
      }
      return this.$route.query.pageType || 'look'
    },
    isDisabled() {
      return this.pageType === 'look'
    },
    breadcrumbTitle() {
      const map = {
        look: '竣工项目归档计划详情',
        check: '竣工项目归档计划核定',
      }
      return map[this.pageType] || map['look']
    },
    isDisabled() {
      return this.pageType === 'look'
    },
  },
  methods: {
    /**
     * 判断是否可进行核定操作
     * 处于详情页面或者是已核定的数据 不允许核定
     */
    checkDisabled(data) {
      return this.isDisabled || data.isAlreadyCheck
    },
    /**
     * @param {String} actionName   'isSubmit'：提交
     */
    handleSubmit(actionName) {
      this.invokeSave(actionName)
    },
    async invokeSave(actionName) {
      if (this.loadingState[actionName]) return
      this.loadingState[actionName] = true
      const addList = this.originList
        .filter((item) => {
          return item.ifCheckArchive && !item.isAlreadyCheck
        })
        .map((item) => item.id)
      if (!addList.length) {
        this.$message.warning('请至少勾选一项')
        this.loadingState[actionName] = false
        return
      }
      try {
        await packageConfirm({
          okText: '确定',
          content: '请确认是否提交，提交后不可修改！',
          callback: async () => {
            await checkArchive(addList)
            this.$message.success('提交成功')
            this.handleClose()
          },
        })
      } catch (e) {
        console.error(e)
      }
      this.loadingState[actionName] = false
    },
    async loadData(parameter) {
      const { archiveYear, branchOrgId } = this.$route.query
      const requestParameters = Object.assign({}, { ...parameter }, { archiveYear, branchOrgId })
      return getPlanCheckDetail(requestParameters).then((res) => {
        const list = res.data
        list.forEach((item) => {
          item.isAlreadyCheck = !!item.ifCheckArchive
          // 默认“能否按时归档”为“是”的是勾选状态
          if(item.ifOnTimeArchive) {
            item.ifCheckArchive = true
          }
        })
        this.originList = list
        return {
          data: list,
        }
      })
    },
    handleClose() {
      this.$close()
    },
  },
}
</script>

<style>
</style>